<style lang="scss">
.van-hairline--bottom:after {
  border-bottom-width: 0;
}

.record_one {
  img {
    width: 100%;
  }
}

.record_two {
  box-sizing: border-box;
  width: 95vw;
  height: 40%;
  border: 1px solid #f0f0f0;
  margin: 10px;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
  margin-top: -5px;

  div {
    display: flex;
    // justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
  }

  P {
    margin-left: 5px;
    width: 50px;
  }

  span {
    margin-left: 40%;
  }
}

.record_three {
  display: flex;
  box-sizing: border-box;
  margin: 10px;

  button {
    width: 50%;
    height: 30px;
    background-color: red;
    border: none;
    margin: 3px;
    border-radius: 5px;
    color: #fff;
  }
}

.van_img {
  display: flex;

  justify-content: space-around;
  align-items: center;

  span {
    margin: 20px;
  }



}

.popup_button {
  width: 90%;
  margin-left: 18px;
  background: rgb(225, 51, 51);
  color: #fff;
  border: none;
  height: 30px;
  border-radius: 8px;
  margin-top: 5px;
  font-size: 18px;
}
</style>

<template>
  <div class="">
    <van-nav-bar title="预约记录" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div class="record_one">
      <img src="https://osscdn.zhongheschool.com/operation/img/pcimg/wangshou-tanchuang.png" alt="">
    </div>
    <div class="record_two">
      <div>
        <p>预约项目 </p><span>{{ ite.name }}</span>
      </div>
      <div>
        <p>预约时间 </p><span>2023-{{ ite.time_year_now }}</span>
      </div>
      <div>
        <p>预约人数 </p><span>{{ ite.value }}</span>
      </div>
      <div>
        <p>手机号码 </p><span>{{ this.$route.query.phone }}</span>
      </div>
      <div>
        <p>姓名 </p><span>{{ this.$route.query.rePeople }}</span>
      </div>
      <div>
        <p>发型师 </p><span>{{ ite.serveName }}</span>
      </div>
      <div>
        <p>留言备注 </p><span>{{ ite.val }}</span>
      </div>
    </div>
    <div class="record_three">
      <button @click="show = true">查看预约码</button>
      <button @click="exit()">取消预约</button>
    </div>
    <van-dialog v-model="show" title="" class="van_img">
      <span>{{ this.$route.query.code }}</span>
      <div>
        <img :src="qrcode" width="192">

      </div>
    </van-dialog>

    <van-popup v-model="popup" position="bottom" :style="{ height: '43%' }">
      <h2 style="margin-left: 15px;">取消预约原因</h2>
      <van-radio-group v-model="radio">
        <van-cell-group>
          <van-cell title="买多了/买错了" clickable @click="radio = '1'">
            <template #right-icon>
              <van-radio name="1" />
            </template>
          </van-cell>
          <van-cell title="计划有变/暂时不需要了" clickable @click="radio = '2'">
            <template #right-icon>
              <van-radio name="2" />
            </template>
          </van-cell>
          <van-cell title="协商一致取消" clickable @click="radio = '3'">
            <template #right-icon>
              <van-radio name="3" />
            </template>
          </van-cell>
          <van-cell title="其他" clickable @click="radio = '4'">
            <template #right-icon>
              <van-radio name="4" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
      <button class="popup_button" @click="sub()">确定</button>
    </van-popup>
    <van-overlay :show="oi" />
  </div>
</template>

<script>
import Vue from 'vue';
import { NavBar, Toast } from 'vant';
import { Dialog } from 'vant';
import { Popup } from 'vant';
import { RadioGroup, Radio, CellGroup, Cell } from 'vant';
import { Overlay } from 'vant';
import axios from 'axios';
import QRCode from 'qrcode'
Vue.use(Overlay);

Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(Popup);
Vue.use(NavBar);
Vue.use(Dialog);
Vue.use(CellGroup);
Vue.use(Cell);
export default {
  name: '',
  data() {
    return {
      show: false,
      popup: false,
      radio: 0,
      oi: false,
      reId: '',
      ite: '',
      qrcode:''
    }
  },
  methods: {
    setQRCode(str) {
      QRCode.toDataURL(str, { width: 192, margin: 1 }).then(res => {
        // toDataURL方法返回一个promise
        this.qrcode = res;
      })
    },
    onClickLeft() {
      this.$router.push({ path: '/index' });
    },
    async exit() {
      this.popup = true
      // console.log(parseInt(this.$route.query.reId));


    },
    sub() {
      // console.log(this.radio);
      if (this.radio == '0') {

        Toast('请选择正确的处理方式')
        console.log(this.radio);
      } else {
        axios({
          url: 'http://192.168.20.106:8000/api/subscribe/delete',
          method: 'post',
          data: {
            reId: this.reId
          }
        }).then(res => {
          console.log(res);
          if (res.data.code == 200) {
            Toast('删除成功')

          } else {
            Toast('删除失败')
          }
        })


        this.popup = false
        setTimeout(() => {
          this.$router.push({ path: '/index' });
        }, 3000)
        this.oi = true

      }
    }

  },
  mounted() {
    console.log(this.$route.query);
    this.ite = this.$route.query.data;
    this.reId = this.$route.query.reId;
    this.setQRCode(this.$route.query.code)
  },
  components: {
    [Dialog.Component.name]: Dialog.Component,
  }
}
</script>


